JavaScript y D3

IIC2026 2020-2

D3.js

JavaScript y D3

IIC2026 2020-2

D3.js


Librería escrita en JavaScript para manipular documentos basándose en datos.

DDD


Librería escrita en JavaScript para manipular documentos basándose en datos.

Data Driven Documents


Librería escrita en JavaScript para manipular documentos basándose en datos.

D3.js


  • Su intención es utilizar HTML, CSS y SVG para crear visualizaciones.
  • Apareció en un momento en que esto no era común para herramientas de visualización.
  • Escrita por Mike Bostock.


D3.js


NO es una librería de visualización de alto nivel.



            const grafico_de_barra = crear(); // ❌
            grafico_de_barra.graficar(); // ❌
					

D3.js


NO es una librería de visualización de alto nivel.



            const grafico_de_barra = crear(); // ❌
            grafico_de_barra.graficar(); // ❌
          

Son herramientas para crear visualizaciones 🔨🔧🔩⚒️⚙️.

D3.js


Utilizaremos la versión 5 en el curso.


👀 con encontrar recursos y ejemplos escritos en la versión 3 o 4.

Utilizar D3



<!DOCTYPE html>
<html>
    
  <head>
    <meta charset="utf-8">
    <title>Ejemplo con D3</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>

  <body>
    
    <script src='programa_4.js' charset='utf-8'></script>
  </body>
</html>
          

Utilizar D3



<!DOCTYPE html>
<html>
    
  <head>
    <meta charset="utf-8">
    <title>Ejemplo con D3</title>
    <script src="./ruta/en/computador/d3.v5.min.js"></script>
  </head>

  <body>
    
    <script src='programa_4.js' charset='utf-8'></script>
  </body>
</html>
          

Utilizar D3



const svg = d3.select("body").append("svg");

const datos = [150, 256, 130, 0, 23, 422, 235];

svg.attr("width", 50 + datos.length * 100).attr("height", 500);

svg
  .selectAll("rect")
  .data(datos)
  .enter()
  .append("rect")
  .attr("width", 50)
  .attr("fill", "magenta")
  .attr("height", (d) => d)
  .attr("x", (_, i) => 50 + i * 100);

          

D3.js

JavaScript y D3

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!